﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pseudo</title>
    <link type="text/css" href="../base.css" rel="stylesheet">
    <link type="text/css" href="index.css" rel="stylesheet">
</head>
<body>
<div id="body">
    <h1 class="page-title">Pseudo Selectors:Hover</h1>

    <div website="castle.com">

    </div>

    <h1 class="page-title">Pseudo Selectors:First & Last Child</h1>
    <div id="parent">
        <p class="child">First Child p</p>
        <p class="child">Second Child p</p>
        <p class="child">ThirdChild p</p>
    </div>


    <h1 class="page-title">Pseudo Selectors:Focus</h1>
    <input type="text" class="test" />

    <h1 class="page-title">Pseudo Selectors:Checked</h1>
    <input type="checkbox" id="cbox">
    <div class="demo">
        This is demo
    </div>


    <h1 class="page-title">Pseudo Selectors:Disabled</h1>
    <input type="text" disabled="disabled">
    <div disabled="disabled">
        test
    </div>


    <h1 class="page-title">Pseudo Selectors:Not</h1>
    <p class="para graph">paragraph 1</p>
    <p class="para graph">paragraph 2</p>
    <p class="para">paragraph 3</p>
    <p class="para graph">paragraph 4</p>
    <p class="para graph">paragraph 5</p>

    <h1 class="page-title">Pseudo Selectors:Before</h1>
    <div class="block">

    </div>




</div>
<div id="footer">
    <a href="www.google.com" target="_blank">
        Castle.com
    </a>
</div>
</body>
</html>